<!doctype html>
<html>
	<head>
		<meta charset='UTF-8'>
		<meta name='viewport' content='width=device-width initial-scale=1'>
		<title></title>
		<link href='https://fonts.loli.net/css?family=Open+Sans:400italic,700italic,700,400&subset=latin,latin-ext' rel='stylesheet'
		 type='text/css' />
		<link rel="stylesheet" type="text/css" href="../css/wenzhang.css" />
		<link rel="stylesheet" type="text/css" href="../css/index.css"/>
	</head>
	<body>
		<div class="daohang">
		
			<div class="right">
				<ul class="daohang_ul">
					<li><a href="../index.html">首页</a></li>
					<li><a href="./wz00.html">设计要求</a></li>
					<li><a href="../gunyvwo.html">关于我</a></li>
					<li><a href="../xiangce.html">我的相册</a></li>
					<li><a href="../shopin1.html">喜欢的视频</a></li>
					<li><a href="../register.html">登录/注册</a></li>
			
				</ul>
			</div>
		</div>
		<div id='write' class=''>
			<h1><a name="html简单入门" class="md-header-anchor"></a><span>HTML简单入门</span></h1>
			<h2><a name="html初识" class="md-header-anchor"></a><span>HTML初识</span></h2>
			<p><span>1.HTML指的是超文本标记语言（Hyper Text Markup Language），是用来描述网页的一种语言</span>
				<span>2.不是编程语言，而是一种标记语言</span>
				<span>3.标记语言是一套标记标签（markup tag）</span>
				<strong><span>html作用简单理解</span></strong><span>：网页是由网页元素组成，这些元素是利用html标签描述出来，然后通过浏览器解析，就可以显示给用户。</span>
				<strong><span>超文本理解</span></strong><span>：1.它可以加入图片、声音、动画、多媒体等内容（超越文本限制）2.还可以从一个文件转到另一个文件，与世界各地的主机的文件连接（超级链接文本）</span></p>
			<h2><a name="html元素标签分类" class="md-header-anchor"></a><span>HTML元素标签分类</span></h2>
			<h4><a name="常规元素双标签）" class="md-header-anchor"></a><span>常规元素（双标签）</span></h4>
			<ol>
				<li></li>
			</ol>
			<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="bash"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="bash"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 8px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre>
		</div>
		<div class="CodeMirror-measure"></div>
		<div style="position: relative; z-index: 1;"></div>
		<div class="CodeMirror-code" role="presentation">
			<div class="CodeMirror-activeline" style="position: relative;">
				<div class="CodeMirror-activeline-background CodeMirror-linebackground"></div>
				<div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div>
				<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">&lt;标签名&gt; 内容 &lt;/标签名&gt;</span></pre>
			</div>
			<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-number">1</span></span></pre>
		</div>
		</div>
		</div>
		</div>
		</div>
		<div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 46px;"></div>
		<div class="CodeMirror-gutters" style="display: none; height: 46px;"></div>
		</div>
		</div>
		</pre>
		<p><span>比如：</span></p>
		<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="bash"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="bash"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 8px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre>
		</div>
		<div class="CodeMirror-measure"></div>
		<div style="position: relative; z-index: 1;"></div>
		<div class="CodeMirror-code" role="presentation">
			<div class="CodeMirror-activeline" style="position: relative;">
				<div class="CodeMirror-activeline-background CodeMirror-linebackground"></div>
				<div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div>
				<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">&lt;body&gt; 我是谁？&lt;/body&gt;</span></pre>
			</div>
			<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-number">1</span></span></pre>
		</div>
		</div>
		</div>
		</div>
		</div>
		<div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 46px;"></div>
		<div class="CodeMirror-gutters" style="display: none; height: 46px;"></div>
		</div>
		</div>
		</pre>
		<p><strong><span>①</span></strong><span>&lt;标签名&gt;表示该标签的作用开始，一般称作</span><strong><span>开始标签（start tag）</span></strong><span>，
				&lt;/标签名&gt;表示该标签的结束，一般称作</span><strong><span>结束标签（end tag）</span></strong>
			<strong><span>②</span></strong><span>和开始标签相比，结束标签只是在前面加了一个关闭符&quot;/&quot;.</span></p>
		<h4><a name="空元素单标签）" class="md-header-anchor"></a><span>空元素（单标签）</span></h4>
		<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="bash"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="bash"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 8px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre>
		</div>
		<div class="CodeMirror-measure"></div>
		<div style="position: relative; z-index: 1;"></div>
		<div class="CodeMirror-code" role="presentation">
			<div class="CodeMirror-activeline" style="position: relative;">
				<div class="CodeMirror-activeline-background CodeMirror-linebackground"></div>
				<div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div>
				<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">&lt;标签名/&gt;  比如 &lt;br/&gt;</span></pre>
			</div>
			<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-number">1</span></span></pre>
		</div>
		</div>
		</div>
		</div>
		</div>
		<div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 46px;"></div>
		<div class="CodeMirror-gutters" style="display: none; height: 46px;"></div>
		</div>
		</div>
		</pre>
		<p><strong><span>·</span></strong><span>空元素用单标签来表示，简单来说就是里面不需要包含内容，只有一个开始标签不需要关闭</span></p>
		<h4><a name="html骨架标签" class="md-header-anchor"></a><span>html骨架标签</span></h4>
		<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="bash"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="bash"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 8px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre>
		</div>
		<div class="CodeMirror-measure"></div>
		<div style="position: relative; z-index: 1;"></div>
		<div class="CodeMirror-code" role="presentation" style="">
			<div class="CodeMirror-activeline" style="position: relative;">
				<div class="CodeMirror-activeline-background CodeMirror-linebackground"></div>
				<div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div>
				<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">&lt;html&gt; //HTML标签，根标签</span></pre>
			</div>
			<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp;  &lt;head&gt; //文档的头部，head标签中必须要设置的标签是title</span></pre>
			<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp;  &lt;title&gt; &lt;/title&gt; //文档标题</span></pre>
			<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp;  &lt;/head&gt;</span></pre>
			<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp;  &lt;body&gt; //文档主体</span></pre>
			<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp;  &lt;/body&gt;</span></pre>
			<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">&lt;/html&gt;</span></pre>
			<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-number">1234567</span></span></pre>
		</div>
		</div>
		</div>
		</div>
		</div>
		<div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 184px;"></div>
		<div class="CodeMirror-gutters" style="display: none; height: 184px;"></div>
		</div>
		</div>
		</pre>
		<h4><a name="html标签关系" class="md-header-anchor"></a><span>HTML标签关系</span></h4>
		<p><span>1.</span><strong><span>嵌套关系</span></strong><span>：</span></p>
		<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="bash"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="bash"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 8px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre>
		</div>
		<div class="CodeMirror-measure"></div>
		<div style="position: relative; z-index: 1;"></div>
		<div class="CodeMirror-code" role="presentation">
			<div class="CodeMirror-activeline" style="position: relative;">
				<div class="CodeMirror-activeline-background CodeMirror-linebackground"></div>
				<div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div>
				<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">&lt;head&gt;</span></pre>
			</div>
			<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text="	">    </span>&lt;title&gt; &lt;/title&gt;</span></pre>
			<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">&lt;/head&gt;</span></pre>
			<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-number">123</span></span></pre>
		</div>
		</div>
		</div>
		</div>
		</div>
		<div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 92px;"></div>
		<div class="CodeMirror-gutters" style="display: none; height: 92px;"></div>
		</div>
		</div>
		</pre>
		<p><span>2.</span><strong><span>并列关系</span></strong></p>
		<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="bash"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="bash"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 8px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">&lt;head&gt;&lt;/head&gt;</span></pre>
		</div>
		<div class="" style="position: relative;">
			<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">&lt;body&gt;&lt;/body&gt;</span></pre>
		</div>
		</div>
		</div>
		</div>
		</div>
		</div>
		<div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 46px;"></div>
		<div class="CodeMirror-gutters" style="display: none; height: 46px;"></div>
		</div>
		</div>
		</pre>
		</div>
	</body>
</html>
